<template>
  <div class="index">
    <!-- 头部组件 -->
    <Header />

    <!-- 主体内容 -->
    <main>
      <!-- 主体容器 -->
      <div id="mainContainer">
        <!-- 主体部分 -->
        <div class="main">
          <!-- 标题部分组件 -->
          <TopTitle />
          <!-- 内容部分 -->
          <div class="contentBox">
            <!-- 标题 -->
            <div class="title">
              <!-- 左侧 -->
              <div class="left">
                <el-tabs v-model="main.activeName">
                  <el-tab-pane label="新报名" name="first"></el-tab-pane>
                  <el-tab-pane label="在招职位" name="second"></el-tab-pane>
                </el-tabs>
              </div>
              <!-- 右侧 -->
              <div class="right">
                <span>查看子账户数据 ></span>
              </div>
            </div>
            <!-- 内容 -->
            <div :class="currentContent">
              <!-- 新报名信息 -->
              <NewRegistrationInfo
                v-if="
                  main.newRegistrationInfo.length != 0 &&
                  main.activeName == 'first'
                "
              />

              <!-- 职位信息 -->
              <div
                v-else-if="
                  main.jobInfo.length != 0 && main.activeName == 'second'
                "
                v-for="j of main.jobInfo"
                :key="j.id"
                class="item"
              >
                <!-- 上边 -->
                <div class="top">
                  <!-- 左边 -->
                  <div class="left">
                    <p>
                      {{ j.title }}<span class="address">{{ j.address }}</span>
                    </p>
                    <p>
                      <el-button size="mini">{{ j.status }}</el-button
                      ><el-button size="mini" type="info">{{
                        j.jobMsg
                      }}</el-button>
                    </p>
                  </div>
                  <!-- 右边 -->
                  <div class="right">
                    <p>
                      {{ j.exposure | exposure }}
                      <span>今日曝光</span>
                    </p>
                    <p>
                      {{ j.visitor }}
                      <span>访客</span>
                    </p>
                    <p>
                      {{ j.signUp }}
                      <span>报名</span>
                    </p>
                    <p>
                      {{ j.enroll }}
                      <span>录取</span>
                    </p>
                  </div>
                </div>
                <!-- 下边 -->
                <div class="bottom">
                  <el-button size="mini">更多</el-button>
                  <el-button size="mini" type="primary">暂停</el-button>
                </div>
              </div>

              <!-- 没信息 -->
              <!-- <img :src="main.notData.url" v-else="main.jobInfo.length == 0" alt="">
                            <p v-text="main.notData.info" v-else="main.jobInfo.length == 0"></p> -->
            </div>
          </div>
        </div>

        <!-- 侧边部分 -->
        <div class="side">
          <!-- 职位发布 -->
          <div class="job-post-wrap">
            <p>职位发布</p>
            <button @click="showRecruitInfo">发布职位</button>
          </div>
          <!-- 剩余报名单 -->
          <div class="remain-num">
            <p>剩余报名单</p>
            <span
              >0份 <img src="../assets/images/PC_index_arrow.png" alt=""
            /></span>
          </div>
        </div>
      </div>
    </main>

    <!-- 招聘信息 -->
    <div class="recruitInfo" ref="recruitInfo">
      <!-- 容器 -->
      <div class="container">
        <!-- 头部 -->
        <div class="header-box">
          <span>选中招聘类型</span>
          <input type="text" placeholder="输入想招的职位" />
          <img
            src="../assets/images/close.png"
            alt=""
            @click="closeRecruitInfo"
          />
        </div>
        <!-- 主体内容 -->
        <div class="body-box">
          <!-- 左侧招聘类型 -->
          <div class="nav">
            <div class="box">
              <div
                v-for="(j, index) of recruitInfo.jobType"
                :key="index"
                @click="selectJobType(index)"
              >
                <span></span>
                {{ j }}
              </div>
            </div>
          </div>
          <!-- 右侧二级菜单 -->
          <div class="secondNav">
            <div class="box">
              <div
                v-for="(s, index) of recruitInfo.secondJobType[
                  recruitInfo.index
                ]"
                :key="index"
                @click="showPostAPosition"
              >
                {{ s }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 尾部组件 -->
    <Footer />
  </div>
</template>

<script>
// 引入 jquery
import $ from "jquery";
// 引用公用样式
import "../assets/css/all.css";
// 引入头部组件
import Header from "@/components/Header.vue";
// 引入尾部组件
import Footer from "@/components/Footer.vue";
// 引入标题部分组件
import TopTitle from "@/components/index/TopTitle.vue";
// 引入新报名信息组件
import NewRegistrationInfo from "@/components/index/NewRegistrationInfo.vue";

export default {
  // 组件名
  name: "IndexView",
  // 子组件
  components: {
    Header,
    Footer,
    NewRegistrationInfo,
    TopTitle,
  },
  // 展示的数据
  data() {
    return {
      // 主体部分
      main: {
        // 切换报名与在招职位
        activeName: "first",
        // 备注信息显示
        isInput: false,
        // 备注输入框信息
        myRemarkInput: "",
        // 新报名信息
        newRegistrationInfo: {
          title: "招聘店铺收银员",
          img: "../assets/images/user.png",
          name: "张华",
          nickName: "",
          data: "11月21日 17:39",
          sex: "女",
          age: 22,
          school: "本科",
          phone: "13513137504",
          status: "未联系",
        },
        // 在招职位信息
        jobInfo: [
          {
            id: 1,
            title: "招聘店铺收银员",
            address: "[珠海]",
            status: "招聘中",
            jobMsg: "普通职位",
            exposure: 9,
            visitor: 0,
            signUp: 0,
            enroll: 0,
          },
          {
            id: 2,
            title: "招聘店铺收银员",
            address: "[珠海]",
            status: "招聘中",
            jobMsg: "普通职位",
            exposure: 20,
            visitor: 1,
            signUp: 2,
            enroll: 0,
          },
        ],
        // 没有信息时显示
        notData: {
          url: "../assets/images/候选人.png",
          info: "暂无候选人",
        },
      },
      // 招聘信息
      recruitInfo: {
        index: 0,
        jobType: [
          "餐厅服务",
          "超市零售",
          "物流仓储",
          "客服话务",
          "美容美发",
          "其他",
        ],
        secondJobType: [
          ["收营员1", "厨师", "服务生", "厨工", "经理", "茶艺师"],
          ["收营员2", "厨师", "服务生", "厨工", "经理", "茶艺师"],
          ["收营员3", "厨师", "服务生", "厨工", "经理", "茶艺师"],
          ["收营员4", "厨师", "服务生", "厨工", "经理", "茶艺师"],
          ["收营员5", "厨师", "服务生", "厨工", "经理", "茶艺师"],
          ["收营员6", "厨师", "服务生", "厨工", "经理", "茶艺师"],
        ],
      },
    };
  },
  // 方法
  methods: {
    // 主体导航栏
    handleMainSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    // ----------- 招聘信息 ------------
    // 显示招聘信息
    showRecruitInfo() {
      this.$refs.recruitInfo.style.display = "block";
    },
    // 关闭招聘信息
    closeRecruitInfo() {
      this.$refs.recruitInfo.style.display = "none";
    },
    // 切换二级菜单
    selectJobType(idx) {
      // 全部默认样式
      $(".recruitInfo .nav .box div").each((index, ele) => {
        var ele = $(ele);
        ele.css({ background: "", color: "#242933" });
        ele.children("span").css("display", "none");
      });
      // 点击的那个元素更改样式
      var clickDiv = $(".recruitInfo .nav .box div").eq(idx);
      clickDiv.css({ background: "white", color: "#1ecdb9" });
      clickDiv.children("span").css("display", "block");
      this.recruitInfo.index = idx;
    },
    // 显示发布职位页面
    showPostAPosition() {
      alert("显示发布职位页面！");
    },
  },
  // 过滤器
  filters: {
    // 判断数字是否小于10
    exposure(value) {
      return value < 10 ? "<10" : value;
    },
  },
  // 钩子
  mounted() {
    // -------- 招聘信息 ---------
    // 展示第一行招聘类型
    this.selectJobType(0);
  },
  // 计算属性
  computed: {
    // 获取当前激活标签页的内容
    currentContent() {
      if (this.main.activeName == "first") {
        this.main.notData.url = "../assets/images/候选人.png";
        this.main.notData.info = "暂无候选人";
        return "content";
      } else {
        this.main.notData.url = "../assets/images/暂无记录.png";
        this.main.notData.info = "暂无记录";
        return "contentTwo";
      }
    },
  },
};
</script>

<style scoped>
main {
  width: 100%;
  text-align: left;
}

/* ------------------------ 主体容器  -------------------*/
#mainContainer {
  width: 1200px;
  margin: 50px auto 0;
  /* border: 1px solid black; */
  display: flex;
}

/* ----------- 主体部分 ------------ */
#mainContainer .main {
  flex: 4;
}
/* 标题部分 */
#mainContainer .main .topTitle {
  height: 140px;
  border-radius: 5px;
  background: white;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
#mainContainer .main .topTitle > div {
  width: 200px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
#mainContainer .main .topTitle > div span {
  width: 56px;
  height: 56px;
  text-align: center;
  line-height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin: 0 20px;
}
#mainContainer .main .topTitle > div div {
  text-align: center;
  color: #3c4858;
  font-size: 22px;
}
#mainContainer .main .topTitle > div div p {
  color: #8392a7;
  font-size: 14px;
}
/* 内容部分 */
#mainContainer .main .contentBox {
  height: 400px;
  border-radius: 5px;
}
/* 标题 */
#mainContainer .main .contentBox .title {
  height: 40px;
  margin: 15px 0 0;
  padding: 0 20px;
  /* border-bottom: 1px solid rgba(0,0,0,.1); */
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#mainContainer .main .contentBox .title .el-tabs {
  height: 40px;
  background: rgb(239, 243, 246);
  border-bottom: none;
}
#mainContainer .main .contentBox .title .el-tabs .el-tab-pane {
  height: inherit;
  line-height: 40px;
}
#mainContainer .main .contentBox .title .right span {
  color: rgb(30, 205, 185);
  font-size: 14px;
  cursor: pointer;
}
/* 内容 */
#mainContainer .main .contentBox .content,
#mainContainer .main .contentBox .contentTwo {
  height: 400px;
  text-align: center;
  /* background: white; */
}

/* ==== 职位信息 ===== */
#mainContainer .main .contentBox > div div.item {
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 5px;
  background: white;
  margin: 0 0 10px 0;
}
/* 上边 */
#mainContainer .main .contentBox > div div.item .top {
  height: 100px;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
/* 左边 */
#mainContainer .main .contentBox > div div.item .left {
  line-height: 40px;
}
#mainContainer .main .contentBox > div div.item .left .address {
  color: #8392a7;
  font-size: 14px;
}
/* 右边 */
#mainContainer .main .contentBox > div div.item .right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
#mainContainer .main .contentBox > div div.item .right p {
  width: 60px;
  height: 60px;
  line-height: 30px;
  font-size: 22px;
  margin: 0 10px;
}
#mainContainer .main .contentBox > div div.item .right p span {
  color: #838d99;
  font-size: 12px;
  display: block;
}
/* 下边 */
#mainContainer .main .contentBox > div div.item .bottom {
  height: 50px;
  line-height: 50px;
  text-align: right;
  padding: 0 20px 0 0;
}
/* ===== 没信息时显示 ===== */
#mainContainer .main .contentBox > div > img {
  width: 105px;
  height: 105px;
  margin-top: 100px;
}
#mainContainer .main .contentBox .contentTwo > img {
  width: 250px;
  height: 168px;
}
#mainContainer .main .contentBox > div > p {
  color: #808999;
  font-size: 14px;
}
#mainContainer .main .contentBox .contentTwo > p {
  font-size: 16px;
}
/* ----------- 侧边部分 -------------*/
#mainContainer .side {
  height: 400px;
  margin: 0 0 0 20px;
  flex: 1;
}
/* 职位发布 */
#mainContainer .side .job-post-wrap {
  height: 120px;
  text-align: center;
  color: #354052;
  font-size: 14px;
  padding-top: 20px;
  border-radius: 5px;
  background: white;
}
#mainContainer .side .job-post-wrap button {
  width: 200px;
  height: 48px;
  color: #1ecdb9;
  font-size: 14px;
  border-radius: 5px;
  background: none;
  border: 1px solid #1ecdb9;
  cursor: pointer;
  margin-top: 20px;
}
/* 剩余报名单 */
#mainContainer .side .remain-num {
  height: 120px;
  line-height: 40px;
  color: #354052;
  font-size: 14px;
  text-align: center;
  background: white;
  border-radius: 5px;
  padding-top: 20px;
  margin-top: 40px;
}
#mainContainer .side .remain-num img {
  width: 14px;
  height: 14px;
  margin-top: 4px;
}

/* ------------------------------ 招聘信息 ---------------------------- */
.recruitInfo {
  width: 100%;
  height: 100vh;
  text-align: left;
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  display: none;
}
/* 容器 */
.recruitInfo .container {
  width: 936px;
  height: 626px;
  border-radius: 5px;
  background: white;
  margin: 10px auto 0;
}
/* 头部 */
.recruitInfo .header-box {
  height: 31px;
  color: #172238;
  font-size: 18px;
  padding: 17px 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  position: relative;
}
.recruitInfo .header-box input {
  width: 248px;
  height: 31px;
  color: rgb(96, 98, 102);
  text-indent: 1em;
  outline: none;
  border-radius: 5px;
  border: 1px solid #1ecdb9;
  margin-left: 20px;
}
.recruitInfo .header-box img {
  width: 16px;
  height: 16px;
  position: absolute;
  right: 21px;
  top: 24px;
  cursor: pointer;
}
/* 主体内容 */
.recruitInfo .body-box {
  height: 89%;
  display: flex;
  justify-content: space-between;
  /* border: 1px solid red; */
}
/* 左侧招聘类型 */
.recruitInfo .body-box .nav {
  height: 100%;
  background: #eff3f6;
  /* border: 1px solid blue; */
  flex: 1;
}
.recruitInfo .body-box .nav .box {
  width: 100%;
  height: 98%;
  /* 启用滚动条 */
  overflow: auto;
  /* 隐藏滚动条 */
  -ms-overflow-style: none;
  scrollbar-width: none;
  margin: 5px 0;
}
.recruitInfo .body-box .nav .box div {
  width: 100%;
  height: 35px;
  line-height: 35px;
  color: #242933;
  font-size: 14px;
  text-indent: 1.5em;
  position: relative;
  cursor: pointer;
  transition: all ease 0.6s;
}
.recruitInfo .body-box .nav .box div span {
  width: 4px;
  height: 20px;
  background: #1ecdb9;
  position: absolute;
  top: 8px;
  left: 5px;
  display: none;
}
.recruitInfo .body-box .nav .box div:hover {
  color: #1ecdb9;
  background: white;
  transition: all ease 0.6s;
}
.recruitInfo .body-box .nav .box div:hover ~ span {
  display: block;
}
/* 右侧二级菜单 */
.recruitInfo .body-box .secondNav {
  flex: 4;
}
.recruitInfo .body-box .secondNav .box {
  width: 688px;
  /* height: 200px; */
  /* line-height: 50px; */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: flex-start;
  margin: 20px;
}
.recruitInfo .body-box .secondNav .box div {
  width: 150px;
  height: 40px;
  line-height: 40px;
  color: #242933;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin: 15px 0;
}
</style>